<script setup lang="ts">
  import { PropType } from 'vue'

  const props = defineProps({
    orderDetail: {
      type: Object as PropType<OrderDetail>,
      required: true,
    },
  })
</script>

<template>
  <div class="order-detail-network-info">
    <div class="title">服务商信息</div>
    <div class="network-name-receive-time info-line">
      <div class="info-item">
        <div class="label">网点名称:</div>
        <div class="value">{{ props.orderDetail.network }}</div>
      </div>
      <div class="info-item">
        <div class="label">接单时间:</div>
        <div class="value">{{ props.orderDetail.receivingOrderTime }}</div>
      </div>
    </div>
    <div class="undertake-person-assign-time info-line">
      <div class="info-item">
        <div class="label">负责人:</div>
        <div class="value">
          <span>{{ props.orderDetail.networkManaterEmp }}</span>
          <span>&nbsp;</span>
          <span>{{ props.orderDetail.networkManaterPhone }}</span>
        </div>
      </div>
      <div class="info-item">
        <div class="label">派工时间:</div>
        <div class="value">{{ props.orderDetail.dispatchOrderEngineerTime }}</div>
      </div>
    </div>
    <div class="engineer-engineer-receive-time info-line">
      <div class="info-item">
        <div class="label">工程师:</div>
        <div class="value">
          <span>{{ props.orderDetail.engineerManagerEmp }}</span>
          <span>&nbsp;</span>
          <span>{{ props.orderDetail.engineerManagerPhone }}</span>
        </div>
      </div>
      <div class="info-item">
        <div class="label">工程师接单时间:</div>
        <div class="value">{{ props.orderDetail.engineerReceivingOrderTime }}</div>
      </div>
    </div>
    <div class="address info-line">
      <div class="info-item">
        <div class="label">地址:</div>
        <div class="value" style="white-space: wrap">{{ props.orderDetail.networkAddress }}</div>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
  .order-detail-network-info {
    display: flex;
    flex-direction: column;
    gap: 12px;

    .title {
      font-size: 14px;
      font-weight: bold;
      padding-left: 6px;
      border-left: 3px solid $primaryColor;
    }

    .info-line {
      display: flex;
      padding: 0 9px;
      box-sizing: border-box;
      column-gap: 8px;

      .info-item {
        display: flex;
        gap: 5px;
        width: 100%;

        .label {
          color: #606266;
          text-align: right;
          white-space: nowrap;
        }

        .value {
          word-break: break-all;
          min-width: 140px;
        }
      }
    }
  }
</style>
